<!--
 * @Author: zjj
 * @Date: 2019-11-22 10:45:17
 * @LastEditors: zjj
 * @LastEditTime: 2019-11-22 13:24:37
 -->
<!--  -->
<template>
  <div class="coupon">
    <Nav title="礼品券包">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="divide-tip flex aligin-center justify-center">
      <span class="line mr-6"></span>
      <span class="buy-tip">购买活动商品即送</span>
      <span class="line ml-6"></span>
    </div>
    <div class="flex justify-center">
      <div class="tab-wrap">
        <TabCommon :tabs.sync="tabs" :tabIndex.sync="tabIndex" @tabChange="tabChange"></TabCommon>
      </div>
    </div>
    <div class="coupon-wrapper">
      <Coupon class="mt-26" :couponList.sync="c_couponList" @showCoupon="showCoupon"></Coupon>
    </div>
    
    <ShowCoupon
      :couponFlag.sync="couponFlag"
      :couponInfo.sync="couponInfo"
      @closeCoupon="couponFlag=false"
    ></ShowCoupon>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import TabCommon from "../../components/TabDivide";
import Coupon from "../../components/Coupon";
import ShowCoupon from "../../components/showCoupon";
import {coupon} from "../../api/api"
export default {
  components: { Nav, TabCommon, Coupon, ShowCoupon },
  data() {
    return {
      tabs: ["兰溪","金华"],
      tabIndex: 0,
      couponInfo: {},
      couponFlag: false,
      couponList:[]
    };
  },
  computed: {
    c_couponList() {
      if (this.couponList.length) {
        return this.couponList[this.tabIndex].child;
      }
      return [];
    }
  },
  watch: {},
  methods: {
    showCoupon(item) {
      this.couponInfo = item;
      this.couponFlag = true;
    },
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index;
        //重置
      }
    }
  },
  created() {},
  mounted() {
    coupon({id:this.$route.params.id}).then(({data:{result}})=>{
        this.tabs = result.list.map(item => item.city_name);
        this.couponList = result.list;
    })
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.divide-tip {
  margin-top: 26px;
  font-size: 12px;
  color: #999;
  .buy-tip{
    color: #EC5154;
    font-size: 15px;
    font-weight: bold;
  }
  .line {
    width: 91px;
    height: 1px;
    background: #cccccc;
  }
}
.tab-wrap {
  display: inline-block;
  width: auto;
}
.coupon-wrapper{
  padding: 0 16px;
}
</style>